<template>
  <div class="page">
    <div class="task-list">
      <div class="task-header">
        <a-row>
          <a-col :span="18">
            <a-row>
              <a-col :span="6">
                <a-form-item label="" style="margin-left: 10px">
                  <a-input v-model:value="formState.name" placeholder="请输入任务名称" />
                </a-form-item>
              </a-col>
              <a-col :span="6" style="margin-left: 10px">
                <a-form-item>
                  <a-range-picker
                    v-model:value="value"
                    :disabledDate="disabledDate"
                    @change="onChange"
                    @openChange="onOpenChange"
                    @calendarChange="onCalendarChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4" style="margin-left: 10px">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>

      <div class="task-table">
        <a-table :columns="columns" :data-source="data">
          <template #statue="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #createTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #updateTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #action="{ record }">
            <span>
              <a @click="replayExecuteDetails(record)">重跑</a>
              <a-divider type="vertical" />
              <a @click="goToExecuteDetails(record)">查看实例</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定删除当前执行任务?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDelete"
                @cancel="cancelDelete"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { Moment } from "moment";
import { TableDataType, Key } from "@/shims/globe";
import { columns } from "./config";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const dates = ref<Moment[]>([]);
    const value = ref<Moment[]>();
    const formState = reactive({
      name: ""
    });
    const disabledDate = (current: Moment) => {
      if (!dates.value || dates.value.length === 0) {
        return false;
      }
      const diffDate = current.diff(dates.value[0], "days");
      return Math.abs(diffDate) > 7;
    };

    const onOpenChange = (open: boolean) => {
      if (open) {
        dates.value = [];
      }
    };

    const onChange = (val: Moment[]) => {
      value.value = val;
    };

    const onCalendarChange = (val: Moment[]) => {
      dates.value = val;
    };

    const data: TableDataType[] = [
      {
        key: "1",
        name: "这是一个任务",
        statue: "执行中",
        createName: "JavaScript",
        createTime: "2022-03-08 12:00:00",
        updateTime: "2022-03-08 12:00:00"
      },
      {
        key: "2",
        name: "这是一个任务",
        statue: "执行完成",
        createName: "JavaScript",
        createTime: "2022-03-08 12:00:00",
        updateTime: "2022-03-08 12:00:00"
      },
      {
        key: "3",
        name: "这是一个任务",
        statue: "执行失败",
        createName: "JavaScript",
        createTime: "2022-03-08 12:00:00",
        updateTime: "2022-03-08 12:00:00"
      }
    ];
    const replayExecuteDetails = (record: any) => {
      console.log("record: ", record);
      message.success("Click on Yes");
    };
    const goToExecuteDetails = (record: any) => {
      router.push({
        name: "TaskExecuteDetails",
        query: {
          ...record
        }
      });
    };
    const confirmDelete = () => {
      message.success("Click on Yes");
    };
    const cancelDelete = (e: MouseEvent) => {
      console.log(e);
      message.error("Click on No");
    };
    return {
      formState,
      dates,
      value,
      disabledDate,
      onOpenChange,
      onChange,
      onCalendarChange,
      data,
      columns,
      replayExecuteDetails,
      goToExecuteDetails,
      confirmDelete,
      cancelDelete
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
